import React, { Component, createRef } from 'react'
import PropTypes from "prop-types";
import { Form, Input, Tree } from "antd";
import menuList from '@/config/menuConfig'

const Item = Form.Item;
function transformLabelsToTitles(menus) {
    return menus.map(item => {
        const newItem = {
            title: item.label,
            key: item.key,
            icon: item.icon
        };
        if (item.children && item.children.length > 0) {
            newItem.children = transformLabelsToTitles(item.children); // Recursively transform children
        }
        return newItem;
    })
}

export default class UpdateForm extends Component {
    constructor(props) {
        super(props)
        // 创建一个 ref
        this.formRef = createRef();
        const { menus } = this.props.role
        this.state = {
            treeData: transformLabelsToTitles(menuList),
            checkedKeys: menus
        }
    }

    static propsType = {
        setForm: PropTypes.func.isRequired,
        role: PropTypes.object
    }


    //为父组件提交获取最新的menus数据方法
    getMenus = () => this.state.checkedKeys;

    //选中某个node时
    onCheck = (checkedKeys) => {
        this.setState({ checkedKeys })
    };

    setValues = () => {
        const formInstance = this.formRef.current;
        const { name } = this.props.role;
        if (formInstance) {
            formInstance.setFieldsValue({
                roleName: name
            });
        }
    }
    //更新父组件传递过来的下拉选择的菜单信息--
    componentDidUpdate(prevProps) {
        if (this.props.role !== prevProps.role) {
            this.setState({ checkedKeys: this.props.role.menus });
        } else {
            return null
        }
        this.setValues();
    }

    componentDidMount(){
        const formInstance = this.formRef.current;
        if(formInstance){
            //将form对象通过setForm()传递父组件
          this.props.setForm(formInstance)  
        }
    }

   
    render() {
        const { treeData, checkedKeys } = this.state
        const { name } = this.props.role
        return (
            <div>
                <Form
                    ref={this.formRef}
                    name="updateForm"
                    style={{ maxWidth: 360 }}
                    initialValues={{
                        roleName: name
                    }}>
                    <Item
                        label="角色名称"
                        name="roleName"
                        rules={[
                            {
                                required: true,
                                message: "请输入角色的名称!",
                            },
                        ]}
                    >
                        <Input  placeholder="请输入角色的名称"></Input>
                    </Item>
                </Form>
                <Tree
                    checkable
                    defaultExpandAll={true}
                    treeData={treeData}
                    checkedKeys={checkedKeys}
                    onCheck={this.onCheck}
                />

            </div>
        )
    }
}
